<!-- 短时租赁订单 -->
<template>
  <div style="padding: 15px 30px">
    <div class="flex-box">
      <!-- 短时租赁订单 -->
      <div class="large-title"></div>
      <div class="dropdown-box">
        <el-button type="primary" size="mini">已读关闭</el-button>
      </div>
    </div>

    <el-form class="padding-top-15" label-width="120px" size="small" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-input v-model="m_form.name1"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单号">
            <el-input v-model="m_form.name2"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预定时间">
            <el-input v-model="m_form.name3"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="使用时间">
            <el-input v-model="m_form.name4"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总时长(天)">
            <el-input v-model="m_form.name5"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称">
            <el-input v-model="m_form.name6"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="display: flex; justify-content: space-between" class="padding-top-15">
      <div class="font-size-16 font-weight-700">租赁信息</div>
      <div></div>
    </div>
    <el-form class="padding-top-15" label-width="120px" size="small" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="所在楼层">
            <el-input v-model="m_form.name7"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="空间类型">
            <el-input v-model="m_form.name8"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单价(㎡/天/元)">
            <el-input v-model="m_form.name9"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租赁数量">
            <el-input v-model="m_form.name10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预估面积(㎡)">
            <el-input v-model="m_form.name11"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单总价(元)">
            <el-input v-model="m_form.name12"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="display: flex; justify-content: space-between" class="padding-top-15">
      <div class="font-size-16 font-weight-700">付款信息</div>
      <div></div>
    </div>
    <el-form class="padding-top-15" label-width="120px" size="small" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="付款状态">
            <el-input v-model="m_form.name13"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款时间">
            <el-input v-model="m_form.name14"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款方式">
            <el-input v-model="m_form.name15"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- <el-form ref="form" label-width="120px">
      <el-form-item label="说明：">
        <el-input size="mini" v-model="m_form.sm" type="textarea" autosize></el-input>
      </el-form-item>
      <el-form-item label="附件">
          <el-button size="small" type="text">上传附件</el-button>
        </el-form-item>
    </el-form> -->
    <approve-info></approve-info>
  </div>
</template>
<script>
  import approveInfo from './approveInfo.vue';
  import dayjs from 'dayjs';
  export default {
    components: {},
    data() {
      return {
        m_form: {
          name1: '北京阳光大厦',
          name2: '101010101',
          name3: '2022-01-10',
          name4: '2022/01/21-02/21',
          name5: '10',
          name6: '张富贵',
          name7: '办公区2层',
          name8: '共享会议室',
          name9: '1200.00',
          name10: '1',
          name11: '80.00',
          name12: '12000.00',
          name13: '已付款',
          name14: '2022-01-10  12：00',
          name15: '微信支付',
        },
      };
    },
    filters: {},
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //接收参数
    props: {},
    //生命周期 - 创建完成（访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {},
    //方法集合
    methods: {},
    components: { approveInfo },
  };
</script>
<style scoped lang="scss">
  /* @import url(); 引入css类 */
  .flex-box {
    height: 50px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;

    justify-content: space-between;
    .large-title {
      font-size: 18px;
    }
  }
</style>
